

<template>

<div class="hidden md:block bg-gray-50 p-3 border-t border-b shadow-sm"
  v-show="menu.historyMenu.length"> 
  <!-- 历史菜单 -->
  <div class=" grid grid-flow-col gap-3 justify-start ">
     <div 
     v-for="(menus,index) of menu.historyMenu" :key="index"
      class=" hover:bg-violet-500 duration-200 hover:text-white
       border shadow-sm bg-white rounded-md py-2 px-3  flex justify-center items-center gap-2
        text-sm text-gray-600" :class="{'bg-violet-500 text-white':$route.name==menus.route }">
        <router-link :to="{name:menus.route}">  {{menus.title}}</router-link>

   <icon-close theme="outline" size="12" fill="#333" class=" cursor-pointer hover:text-pink-700 " @click="menu.removeHistoryMenu(menus)" />
     </div>
  
  </div>
  </div>
</template>

<script setup lang="ts">
import menuStore from "@/store/menuStore"
import { ref } from "vue"
const menu =menuStore()


</script>

<style scoped>

</style>